<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
            text-decoration:none;
        }
        .header{
            height: 66px;
            background:rgb(236, 235, 235);  
        }
        .banner{
            width: 1212px;
            height: 512px;
            margin:28px auto 25px;
        }
        .menu{
            width: 1212px;
            height: 38px;
            margin:0px auto 25px;
        }
        .list{
            width: 1212px;
            height: 1000px;
            margin:0px auto 25px;
        }
        .more{
            width: 1212px;
            height: 38px;
            background:rgb(219, 217, 217);
            margin:0px auto 25px;
            text-align: center;
            line-height: 38px;
        }
        .header .left{
            float: left;
            margin-left: 36px;
            margin-top: 24px;
        }
        .header .nav li{
            float: left;
            margin:22px auto;
            margin-left: 40px;
            background: red;
        }
        .header .right{
            float: right;
            margin:22px auto;
            margin-left: 40px;
        }
        .banner .left{
            width: 910px;
            float: left;
        }
        .banner .left img{
            width: 910px;
        }
        .banner .right{
            width: 290px;
            float: right;
        }
        .banner .right li{
            width: 290px;
            height: 163px;
            margin-bottom: 12px;
            overflow: hidden;
            position: relative;
        }
        .banner .right img{
            width: 290px;
        }
        .banner .right p{
            position: absolute;
            left:0px;
            bottom:0px;
            background:rgba(0,0,0,0.6);
            width:290px;
            height: 30px;
            line-height: 30px;
            color:white
        }
        .menu li{
            width: 132px;
            height: 34px;
            border:1px solid red;
            float: left;
            margin-right: 17px;
            padding-left: 16px;
            line-height: 34px;
        }
        .list li{
                width: 291px;
                height: 315px;
                border-bottom: 1px solid #000;
                margin-right: 15px;
                float: left;
                margin-bottom: 25px;
            }
            .list li:nth-of-type(4n){
                margin-right: 0px;
            }
            .list p{
                margin:0px 20px;
            }
            .list .left{
                float: left;
            }
            .list .right1{
                float: right;
                margin-left: 80px;
            }
            .list .right2{
                float: right;
            }
            .list img{
                width: 291px;
            }
            .list p:nth-of-type(1){
                height: 42px;
                margin-bottom: 24px;
            }
            .pics{
                width: 1212px;
                height: 283px;
                margin:10px auto;
            }
            .footer{
                height: 30px;
                background:#000;
            }
            .pics p:nth-of-type(1){
                color:gray;
                font-size: 14px;
                margin:12px 0px;
            }
            .pics img{
                margin-right: 12px;
            }
            .footer {
                color:white;
            }
            .footer ul{
                float: left;
            }
            .footer li{
                float: left;
                padding:0px 4px;
                border-right: 1px solid red;
            }
            .footer p{
                float: right;
            }
    </style>
</head>
<body>
    <div class="header">
        <span class="left">三</span>
        <ul class="nav">
            <li>赞</li>
            <li>萌</li>
            <li>哈</li>
            <li>艹</li>
            <li>买</li>
        </ul>
        <span class="right">登录</span>
    </div>
    <div class="banner">
    <img src="images/10.png" alt="" class="left">
    <ul class="right">
        <li>
            <img src="images/01.png" alt="">
            <p>原创设计 | 望月</p>
        </li>
        <li>
            <img src="images/02.png" alt="">
            <p>原创设计｜《荒唐的器具》</p>
        </li>
        <li>
            <img src="images/03.png" alt="">
            <p>原创设计| 堆叠-蜡烛</p>
        </li>
        </ul>
    </div>
    <ul class="menu">
        <li>最新</li>
        <li>最热</li>
        <li>热议</li>
        <li>随机</li>
    </ul>
    <ul class="list">
        <li>
            <img src="images/11.jpg" alt="">
            <p>青山周平在《梦想改造家》的设计被“糟蹋”，是设计的问题，还是屋主的错？</p>
            <p>
                <span class="left">5小时前</span>
                <span class="right1">3</span>
                <span class="right2">102</span>
            </p>
        </li>
        <li>
            <img src="images/12.png" alt="">
            <p>涨姿势了！设计师都要懂的汉字发展简史！</p>
            <p>
                <span class="left">5小时前</span>
                <span class="right1">1</span>
                <span class="right2">43</span>
            </p>
        </li>
        <li>
            <img src="images/13.jpg" alt="">
            <p>真美！LV新推出上海、澳大利亚、布鲁塞尔游记画册！</p>
            <p>
                <span class="left">12小时前</span>
                <span class="right1">0</span>
                <span class="right2">67</span>
            </p>
        </li>
        <li>
            <img src="images/14.jpg" alt="">
            <p>布加迪新车亮相，全球9台，售价2500万！</p>
            <p>
                <span class="left">12小时前</span>
                <span class="right1">4</span>
                <span class="right2">64</span>
            </p>
        </li>
        <li>
            <img src="images/15.gif" alt="">
            <p>美哭了！河南卫视的端午节目又来炸场了！</p>
            <p>
                <span class="left">18小时前</span>
                <span class="right1">4</span>
                <span class="right2">354</span>
            </p>
        </li>
        <li>
            <img src="images/16.gif" alt="">
            <p>本田做了套导航，却只能穿在脚上！<div class=""></div></p>
            <p>
                <span class="left">22小时前</span>
                <span class="right1">3</span>
                <span class="right2">1809</span>
            </p>
        </li>
        <li>
            <img src="images/17.webp" alt="">
            <p>为狮子王设计150种死法，他用脑洞征服迪士尼<div class=""></div></p>
            <p>
                <span class="left">22小时前</span>
                <span class="right1">6</span>
                <span class="right2">204</span>
            </p>
        </li>
        <li>
            <img src="images/18.jpg" alt="">
            <p>为什么高跟鞋从辣妹们脚上消失了？<div class=""></div></p>
            <p>
                <span class="left">23小时前</span>
                <span class="right1">2</span>
                <span class="right2">843</span>
            </p>
        </li>
        <li>
            <img src="images/19.jpg" alt="">
            <p>一张图片就是一个LOGO（三）<div class=""></div></p>
            <p>
                <span class="left">1天前</span>
                <span class="right1">11</span>
                <span class="right2">547</span>
            </p>
        </li>
        <li>
            <img src="images/20.jpg" alt="">
            <p>「2021年iF设计奖」​婴童产品类获奖作品欣赏<div class=""></div></p>
            <p>
                <span class="left">2天前</span>
                <span class="right1">3</span>
                <span class="right2">563</span>
            </p>
        </li>
        <li>
            <img src="images/21.gif" alt="">
            <p>我有一大堆红包，该怎么发出去呢？<div class=""></div></p>
            <p>
                <span class="left">2天前</span>
                <span class="right1">1</span>
                <span class="right2">43</span>
            </p>
        </li>
        <li>
            <img src="images/22.jpg" alt="">
            <p>雪铁龙也要换标了？网友：换了个寂寞！<div class=""></div></p>
            <p>
                <span class="left">2天前</span>
                <span class="right1">4</span>
                <span class="right2">800</span>
            </p>
        </li>
    </ul>
    <p class="more">太快了吧，慢慢来</p>
    <div class="pics">
        <p>合作伙伴</p>
        <p>
            <img src="images/26.png" alt="">
            <img src="images/27.png" alt="">
            <img src="images/28.png" alt="">
        </p>
        <p>友情链接</p>
        <p><a href="">DRC北京工业设计创意产业基地</a><a href="">中国工业设计协会</a><a href="">设计邦</a><a href="">网易家居</a><a href="">凤凰家居</a></p>
    </div>
    <div class="footer">
        <ul>
            <li>关于</li>
            <li>合作</li>
            <li>投稿</li>
            <li>工业设计导航</li>
            <li>站点地图</li>
        </ul>
        <p>2016年设计癖</p>
    </div>

</body>
</html>